<template>
	<view class="page">
		<scroll-view scroll-y="true" style=" padding-bottom:50px">
			<view class="bg-img bg-theme flex align-center banner" style="height: 380rpx;border-bottom-left-radius: 30rpx;border-bottom-right-radius: 30rpx;">
				<view class="flex align-center padding-xl text-white" style="width: 100%;height: 100%; padding-bottom: 0;">
					<view v-if="!hasLogin" class="flex-1 flex align-center" @tap="login">
						<text class="round text-white text-lg text-fw600" style="border:1rpx solid #FFF; border-radius: 10rpx; padding:15rpx 30rpx;">去登录</text>
					</view>
					<view class="flex align-center justify-center" v-if="hasLogin&& face">
						<!-- <view class="cu-avatar round avatar_img" :style="'background-image:url('+userInfo.face+');'"></view> -->
						<image class="cu-avatar round avatar_img" :src="face" mode="aspectFit"></image>
					</view>
					<view class="margin-left" v-if="hasLogin" style="flex:1;height: 110rpx;display: flex;flex-direction: column;justify-content: space-between;">
						<text class="text-xl" style="padding: 0 0rpx;font-weight:500;">{{userInfo.nickname || ''}}</text>
						<view>
							<text class="margin-top-sm round text-white text-sm" v-if="userInfo.operate_role_name" style="padding: 6rpx 10rpx; border:1rpx solid #FFF; border-radius: 10rpx;">{{userInfo.operate_role_name || ''}}</text>
						</view>
					</view>
					<view  v-if="hasLogin"  class="cuIcon-right text-white" style="font-size: 40rpx;" @tap="navTo('/pages/profile/setting/editProfile')"></view>
				</view>
			</view>
			<view class="margin radius overHidden shadow bg-white">
				<view class="bg-white padding-top-sm padding-left padding-bottom-sm"  @tap="navTo('/pages/order/orderList?type=0')">
					<view class=" text-df text-black grace-padding" style="font-weight: 600;">订单中心</view>
				</view>
				<view class="margin-top-sm">
					<view class="cu-list grid col-5 no-border" style="padding: 0;">
						<view class="cu-item" v-for="(item,index) in orderList" :key="index">
							<view @tap="navTo('/pages/order/orderList?type='+item.type)">
								<view class='cu-tag badge' v-if="index===0 && orderStatus.wait_pay_num>0">{{orderStatus.wait_pay_num}}</view>
								<view class='cu-tag badge' v-if="index===1 && orderStatus.wait_ship_num>0">{{orderStatus.wait_ship_num}}</view>
								<view class='cu-tag badge' v-if="index===2 && orderStatus.wait_rog_num>0">{{orderStatus.wait_rog_num}}</view>
								<view class='cu-tag badge' v-if="index===3 && orderStatus.wait_comment_num>0">{{orderStatus.wait_comment_num}}</view>
								<view class='cu-tag badge' v-if="index===4 && orderStatus.refund_num>0">{{orderStatus.refund_num}}</view>
								<image :src="item.icon"  mode="aspectFit" style="height: 66rpx;width:66rpx;"></image>
								<text class="text-sm text-black" style="margin-top: 0;">{{item.name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="margin radius shadow overHidden padding-bottom">
				<view class="bg-white padding-top-sm padding-left padding-bottom-sm">
					<view class="text-df text-black grace-padding" style="font-weight: 600;">我的服务</view>
				</view>
				<view class="cu-list menu sm-border" >
					<view class="cu-item arrow" @tap="navTo('/pages/profile/collection')">
						<view class="content">
							<image src="../../static/images/icon_cellection_cur.png" class="png" mode="aspectFit"></image>
							<text class="text-black text-df margin-left-sm">我的收藏</text>
						</view>
					</view>
					<view class="cu-item arrow" @tap="navTo('/pages/profile/address/addrList')">
						<view class="content">
							<image src="../../static/images/icon_address.png" class="png" mode="aspectFit"></image>
							<text class="text-black text-df margin-left-sm">地址管理</text>
						</view>
					</view>
					<view class="cu-item arrow" @tap="navTo('/pages/profile/aftersafe/chat')">
						<view class="content">
							<image src="../../static/images/icon_afterSafe.png" class="png" mode="aspectFit"></image>
							<text class="text-black text-df margin-left-sm">消息中心</text>
						</view>
					</view>
					<!-- <view class="cu-item arrow" @tap="downLoadApp">
						<view class="content flex align-center">
							<view class="cuIcon-moneybagfill" style="color: #CB1414;font-size: 40rpx;margin-right: 16rpx;"></view>
							<text class="text-black text-df margin-left-sm">我的收益</text>
						</view>
					</view>
					<view class="cu-item arrow" @tap="downLoadApp">
						<view class="content flex align-center">
							<view class="cuIcon-share" style="color: #CB1414;font-size: 40rpx;margin-right: 16rpx;"></view>
							<text class="text-black text-df margin-left-sm">我的推广</text>
						</view>
					</view> -->
				</view>
			</view>
			<view class="cu-modal" :class="modalName=='DownLoadTip'?'show':''" @tap="hideModal">
				<view class="cu-dialog margin bg-white">
					<view class="bg-white closeIcon"  @tap="hideModal">X</view>
					<view class="bg-white flex justify-center margin">
						<view class="bg-white flex justify-center align-center">
							<view class="text-lg text-333 text-fw500">App下载提示</view>
						</view>
					</view>
					<view class="bg-white flex justify-center margin-bottom">
						<view class="flex flex-direction justify-center" style="width: 86%;text-align: left;">
							<text class="text-df" style="line-height: 40rpx; color: #666;">您好！请复制链接到浏览器打开，下载链氿APP领取旅游服务及会员权益！下载链接 :</text>
							<text class="text-df" style="line-height: 40rpx; color: #666;">{{link}}</text>
						</view>
					</view>
					<view class="cu-bar bg-white flex justify-center" style="border-top: 1px solid #E1E1E1; border-bottom-left-radius: 10rpx; border-top-right-radius: 10rpx;">
						<view class="flex justify-between margin" style="width: 80%; padding:10rpx 0; border-radius: 10rpx;">
							<text class="text-333 text-sm text-bold">下次再说</text>
							<text class="text-sm text-bold" style="color:#C71717;" @tap="copyBtn(link)">去复制链接</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import * as Order_API from '@/api/order.js'
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo')||{},
				face:uni.getStorageSync('userInfo').face,
				role_id:3,
				hasLogin:false,
				orderStatus:{},
				testId:1,
				orderList:[
					{name:'待付款',icon:'../../static/images/pending_delivery.png',type:1,num:'wait_pay_num'},
					{name:'待发货',icon:'../../static/images/pending_payment.png',type:2,num:'wait_ship_num'},
					{name:'待收货',icon:'../../static/images/already_shipped.png',type:3,num:'wait_rog_num'},
					{name:'待评价',icon:'../../static/images/completed.png',type:4,num:'wait_comment_num'},
					{name:'售后',icon:'../../static/images/after_safe.png',type:5,num:'refund_num'}
				],
				orderStatus:{
					wait_pay_num:0,
					wait_ship_num:0,
					wait_rog_num:0,
					wait_comment_num:0,
					refund_num:0
				},
				modalName:null,
				link:'https://app.chinalianjiu.com',
			};
		},
		// watch:{
		// 	userInfo(newVal){
		// 		console.log(newVal)
		// 		this.userInfo.face = newVal.face
		// 	}
		// },
		onPullDownRefresh() {
			setTimeout(()=> {
				uni.stopPullDownRefresh()
				this.initData();
			}, 200);
		},
		onLoad() {
			// console.log('onload')
			// this.modalName = null
		},
		onShow() {
			this.initData();
		},
		onHide() {
			this.modalName = null
		},
		methods:{
			onShareAppMessage() {
				let page_path = '/pages/home/home'
				let mobile = uni.getStorageSync('userInfo').mobile
				let user = uni.getStorageSync('userInfo').nickname
				let shop_name = uni.getStorageSync('shop').shop_name
				let shop_id = uni.getStorageSync('shop').shop_id
				let title = ''
				let path = ''
				if(mobile && shop_id){
					title = user + '分享的'+shop_name
					path = page_path+'?shop_id='+shop_id+'&sharePhone='+mobile
				}else if(shop_id){
					title = shop_name
					path =  page_path+'?shop_id='+shop_id
				}
			    return {
					title: title,
					path: path
			    }
			},
			initData(){
				const token= uni.getStorageSync('token')
				this.userInfo = uni.getStorageSync('userInfo')
				this.face = this.userInfo.face
				//this.face = 'https://upload.chinalianjiu.com/productImagesshop/714D0DF860D34053AFAA97C77E45F002.png'
				console.log('init face',this.face)
				if(token){
					this.hasLogin = true
					this.userInfo = uni.getStorageSync('userInfo')
					this.GET_OrderStatusNum()
				}else{
					this.hasLogin = false
					this.orderStatus = {
						wait_pay_num:0,
						wait_ship_num:0,
						wait_rog_num:0,
						wait_comment_num:0,
						refund_num:0
					}
				}
			},
			navTo(route) {
				console.log('route==',route)
			    if (!route) {
			        return;
			    }
			    if (!this.hasLogin) {
			        uni.showModal({
			            content: '你暂未登录，是否跳转登录页面？',
			            success: (res) => {
			                if (res.confirm) {
								this.login()
			                }
			            }
			        });
			    } else {
			        uni.navigateTo({url: route})
			    }
			},
			login(){
				uni.navigateTo({url: '../login/login'})
			},
			GET_OrderStatusNum() {
				let shop_id = uni.getStorageSync('shop').shop_id
				if(uni.getStorageSync('token')){
					Order_API.getOrderStatusNum(shop_id).then(res =>{
						this.orderStatus.wait_pay_num = res.wait_pay_num,
						this.orderStatus.wait_ship_num = res.wait_ship_num,
						this.orderStatus.wait_rog_num = res.wait_rog_num,
						this.orderStatus.wait_comment_num = res.wait_comment_num
						this.orderStatus.refund_num = res.refund_num
						if(res.wait_pay_num){
							uni.setStorageSync('orderStatus',res)
						}
					})
				}
			},
			hideModal() {
				this.modalName = null
			},
			checkDetail(){
				if(this.order_sn){
					uni.navigateTo({
						url:'./orderDetail?sn='+this.order_sn
					})	
				}
			},
			downLoadApp(){
				let that = this
				that.hideModal()
				setTimeout(()=>{
					this.modalName = 'DownLoadTip'
				},500)
			},
			copyBtn(e) {
				let that = this
			    uni.setClipboardData({
			     //准备复制的数据
			      data: e,
			      success:(res)=>{
			        uni.showToast({
						icon:'none',
						title: '已成功复制,请到浏览器打开链接',
						duration:3000
			        });
			      },
				  complete() {
				  	that.hideModal()
				  }
			    })
			},
		}
	}
</script>

<style lang="scss">
.bg-theme{
	background-color: $color-main;
}
.png{
	width: 80rpx;
	height: 80rpx;
}
/deep/.cu-dialog {
	overflow: visible;
}
.closeIcon{
	position: absolute;
	right: 0;
	top: -70rpx;
	width: 50rpx;
	height: 50rpx;
	background:rgba(255,255,255,0.4);
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 30rpx;
}
</style>
